<style scoped>
    .line {

    }

    .line div {
        height: 0px;
        border-bottom: 1px dotted #ddd;
        /*margin-top: 15px;*/
        margin-bottom: 24px;
        margin-right: 15px;
    }

    .pro-detail-content {
        padding-left: 20px;
    }

    .pr20 {
        padding-right: 20px;
    }


    .btn {
        height: 30px;
        line-height: 28px;
        border: 1px solid #eee;
        width: 30px;
        text-align: center;
        color: #FFF;
        border-radius: 4px;
        float: right;

    }

    .close {
        background-color: #F39B12;
    }

    .add {
        background-color: #428CCB;
        margin-right: 10px;
    }

    .form .ivu-row {
        padding: 20px 0;
        border-bottom: 1px solid #eee;
    }

    .common-box-body .ivu-input-group {
        top: 0;
    }

    .common-box-body {
        padding-left: 15px;
    }

    .common-box-header {
        margin-right: 15px;
    }

    .boderBottom {
        border-bottom: 1px solid #E2E2E2;
    }
    @media screen and (max-width: 1200px) {
        .pr0{
            padding-right: 0 !important;
        }
    }

</style>
<style>
    .form .ivu-input-group > .ivu-input:last-child, .ivu-input-group-append {
        border-radius: 0 2px 2px 0 !important;
        background-color: #fff;
        border-color:#bebebe;
    }
</style>
<template>
    <div class="">
        <product-title></product-title>
        <div class="common-box-body">
            <!-- ref="proform" :rules="ruleValidate"          -->
            <Form :model="proform" ref="proform" :rules="ruleValidate" label-position="right" class="">
                <Row>
                    <Col :md="24" :lg="12">
                    <FormItem label="产品名称">
                        <Input v-model="proform.name" placeholder="" disabled></Input>
                    </FormItem>
                    </Col>
                </Row>
                <div class="common-box-header mb24">
                    <h3>佣金系数</h3>
                </div>
                <div class="pr15">
                    <Tabs type="card" @on-click="tabClick">
                            <TabPane label="第一年度" name="1"></TabPane>
                            <TabPane label="第二年度" name="2"></TabPane>
                            <TabPane label="第三年度" name="3"></TabPane>
                            <TabPane label="第四年度" name="4"></TabPane>
                            <TabPane label="第五年度" name="5"></TabPane>
                            <TabPane label="第六年度及以上" name="6"></TabPane>
                            <div class="line">
                                <div style="margin-right: 0;margin-top: 8px;"></div>
                            </div>
                    </Tabs>
                    <template v-for="(item,index) in fee">
                        <Row>
                            <Col :md="24" :lg="8">
                                <FormItem label="交费期间">
                                    <Input v-model="fee[index].pay_period" placeholder="" disabled></Input>
                                </FormItem>
                            </Col>
                            <Col :md="24" :lg="8">
                                <FormItem label="佣金系数">
                                    <Input v-model="fee[index].val" placeholder="请输入佣金系数" @on-blur="changeXS(index,item.ptid,evnet)">
                                        <span slot="append">%</span>
                                    </Input>
                                </FormItem>
                            </Col>
                            <i-col :md="24" :lg="24" class="line ">
                                <div style="margin-right: 0"></div>
                            </i-col>
                        </Row>
                        </template>
                        <div style="color:red;">
                            注:佣金系数不能为空，更改后自动保存
                        </div>
                </div>
                <FormItem>

                </FormItem>
            </Form>
            <div id="footer" class="pt22">
            <!-- <Button type="primary" @click="sendAll('proform')">提交</Button>
            <Button type="ghost" @click="cancel()" style="margin-left: 8px">取消</Button> -->
            <!-- <Button type="primary" shape="circle" id="submit" @click="sendAll('proform')" style="border-radius: 30px !important;">
                <Icon type="checkmark-circled"></Icon>
                保存 / 提交
            </Button> -->
            <Button id="back" shape="circle" @click="cancel" style="border-radius: 30px !important;width:120px;">返回</Button>
        </div>
        </div>
        
    </div>
</template>
<script>
    import productTitle from '../../components/productTitle'
    import {getProListAll} from '../../api/product_v2'
    import {createFee} from '../../api/fee'
    import {getRoleAll} from '../../api/role'

import {_pay_period_info,_fee_info,_fee_update} from '../../api/product_v2'
import {_FeeCreate,product_fee_times,product_fee_times_save} from '../../api/fee'
    export default {
        data() {
            return {
                tab:1,
                proform: {
                    name: '',
                },
                fee:[],
                prolist: [],
                period: [],
                pay_period: [],
                role: [],
                ruleValidate: {
                    name: [
                        {required: true, message: '佣金名称不能为空', trigger: 'blur'}
                    ],
                    mid: [
                        {required: true, message: '产品名称不能为空', trigger: 'change'}
                    ],
                    role_id: [
                        {required: true, message: '角色不能为空', trigger: 'change'}
                    ],
                }
            }
        },
        components: {
            productTitle,

        },
        mounted() {
        },
        created() {
            this.getList()
            // this.getRole()
            // this.getPay_period()
            this.getDetial();
        },
        watch: {
            
        },
        mounted(){
            
        },
        methods: {
            changeXS(index,id){
                let re = /(?!^0\.0?0$)^[0-9][0-9]?(\.[0-9]{1,2})?$|^100$/;
                if(re.test(this.fee[index].val)){
                    let params={
                        id:id,
                        times:this.tab,
                        pay_period:this.fee[index].pay_period,
                        role_id:'',
                        val:this.fee[index].val,
                    }
                    new Promise((rev,rej)=>{
                        product_fee_times_save(params).then(res=>{
                            if(res.data.err == 0){
                                this.$Message.success(res.data.info)
                            }else {
                                this.$Message.error(res.data.info);
                            }
                            rev();
                        }).catch(error=>{
                            rej(error)
                        })
                    })
                }else{
                    this.$Message.error('请输入100以内的数字,小数不超过2位');
                    this.fee[index].val=0;
                }
                
            },
            tabClick(val){
                this.tab=val;
                this.getDetial();
            },
            getDetial(){
                let params={
                    id:this.$route.params.id,
                    times:this.tab
                }
                new Promise((resolve, reject) => {
                    product_fee_times(params).then(response => {
                        if (response.data.err == 0) {
                            this.proform = response.data.data;
                            this.fee = response.data.data.list;
                            // this.proform.name=response.data.data.name;
                            // this.proform.pro_name=response.data.data.pname;
                            // this.proform.role_id=response.data.data.role_id.toString();
                            // this.proform.mid=response.data.data.ptid;
                            // this.proform.scaling=response.data.data.scaling;
                            // this.proform.fee_id=response.data.data.id;
                            // // this.$nextTick(()=>{
                            // //     this.proform.fees=response.data.data.fees;
                            // // })
                            //  this.proform.fees=[];
                            //  let _this = this;
                            //  if(response.data.data.fees[0].times){
                            //      response.data.data.fees.map(item=>{
                            //         this.proform.fees.push(item)
                            //     })
                            //  }else{
                            //      for(let i=0;i<response.data.data.fees.length;i++){
                            //         _this.proform.fees.push({times:0,fee:[]});
                                    
                            //         _this.proform.fees[i].times=i+1;
                            //         _this.proform.fees[i].fee=response.data.data.fees[i];
                            //         console.log(_this.proform.fees);
                            //      }
                            //  }
                             
                        } else {
                            this.$Message.error(response.data.info);
                        }
                        resolve();
                    }).catch(error => {
                        reject(error);
                    });
                });
            },
            proChange(index) {
                //console.log(index)
                var _prolist = this.prolist[index]
                this.period = _prolist.period
                this.pay_period = _prolist.pay_period
            },
            periodAdd(index) {
                console.log(index)
                //this.proform.fees[index].period = this.period[0]
                //console.log(this.proform.fees[index].period)
                // console.log(this.proform.fees[index].period?true:false)
                this.$set(this.proform.fees[index], 'period', this.period[0])
            },
            feesAdd(index) {
                this.proform.fees[index].fee.push({
                    pay_period: '',
                    val: ''
                })
            },
            timesAdd() {
                this.proform.fees.push({
                    fee: [{
                        pay_period: '',
                        val: ''
                    }]
                })
            },
            scalingAdd() {
                this.proform.scaling.push(
                    {
                        pay_period: '',
                        val: ''
                    }
                )
            },
            scalingRemove(index) {
                this.proform.scaling.splice(index, 1);
            },
            periodRemove(index) {
                this.proform.fees[index].period = '';
            },
            payTypeRemove(index) {
                this.proform.pay_type.splice(index, 1);
            },
            handleRemove(index) {
                this.proform.pay_period.splice(index, 1);
            },




            feesAdd0(index){
                this.proform.fees[index].fee.push({
                    pay_period:'',
                    val:''
                });
            },
            feesRemove0(index,index1) {
                this.proform.fees[index].fee.splice(index1, 1);
            },
            feesAdd1(){
                this.proform.fees[1].fee.push({
                    pay_period:'',
                    val:''
                });
            },
            feesRemove1(index) {
                this.proform.fees[1].fee.splice(index, 1);
            },
            feesAdd2(){
                this.proform.fees[2].fee.push({
                    pay_period:'',
                    val:''
                });
            },
            feesRemove2(index) {
                this.proform.fees[2].fee.splice(index, 1);
            },
            feesAdd3(){
                this.proform.fees[3].fee.push({
                    pay_period:'',
                    val:''
                });
            },
            feesRemove3(index) {
                this.proform.fees[3].fee.splice(index, 1);
            },
            feesAdd4(){
                this.proform.fees[4].fee.push({
                    pay_period:'',
                    val:''
                });
            },
            feesRemove4(index) {
                this.proform.fees[4].fee.splice(index, 1);
            },
            feesAdd5(){
                this.proform.fees[5].fee.push({
                    pay_period:'',
                    val:''
                });
            },
            feesRemove5(index) {
                this.proform.fees[5].fee.splice(index, 1);
            },





            getList() {
                new Promise((resolve, reject) => {
                    getProListAll().then(response => {
                        if (response.data.err == 0) {
                            this.prolist = response.data.data
                        } else {
                            this.$Message.error(response.data.info);
                        }
                        resolve();
                    }).catch(error => {
                        reject(error);
                    });
                });
            },
            getRole() {
                new Promise((resolve, reject) => {
                    getRoleAll().then(response => {
                        if (response.data.err == 0) {
                            this.role = response.data.data
                        } else {
                            this.$Message.error(response.data.info);
                        }
                        resolve();
                    }).catch(error => {
                        reject(error);
                    });
                });
            },
             getPay_period() {
                 let params={
                     mid:this.$route.params.id
                 }
                new Promise((resolve, reject) => {
                    _pay_period_info(params).then(response => {
                        if (response.data.err == 0) {
                            // this.proform.scaling =  
                            let _this= this;
                            if(response.data.data.pay_period.length>0){
                                _this.proform.scaling=[];
                                response.data.data.pay_period.map(item=>{
                                    _this.proform.scaling.push({
                                        pay_period:item,
                                        val:''
                                    })
                                })
                            }
                            for(let i=0;i<response.data.data.pay_arr.length;i++){
                                if(response.data.data.pay_arr[i].length>0){
                                    _this.proform.fees[i]=[];
                                    response.data.data.pay_arr[i].map(item=>{
                                        _this.proform.fees[i].push({
                                            pay_period:item,
                                            val:''
                                        })
                                    })
                                }
                            }                     
                        } else {
                            this.$Message.error(response.data.info);
                        }
                        resolve();
                    }).catch(error => {
                        reject(error);
                    });
                });
            },
            sendAll(name) {
                this.$refs['proform'].validate((valid) => {
                    if (valid) {
                        new Promise((resolve, reject) => {
                            _fee_update(this.proform).then(response => {
                                if (response.data.err == 0) {
                                    this.$Message.success(response.data.info);
                                    this.$router.push({name:'fee_manage',params:{id:this.proform.mid,name:this.proform.pro_name}});
                                } else {
                                    this.$Message.error(response.data.info);
                                }
                                resolve();
                            }).catch(error => {
                                reject(error);
                            });
                        });
                    } else {
                    }
                })
            },
            cancel() {
                this.$router.push({name:'fee_manage',params:{id:this.proform.mid,name:this.proform.pro_name}});
            }
        }
    }
</script>